<template>
	<scroll-view class="container bg-white" scroll-y style="height: 95vh;">
		<view  id="diypage" @click="onSelectElement">
			<view v-for="(item, index) in pageValue.lists" :key="index">
				<!-- 页面标题 -->
				<template v-if="item.controller == 'header'">
					<cu-header :bgColor="item.attribute.bgcolor" :isBack="item.attribute.back">
						<block slot="content" class="page-name">{{item.attribute.text}}</block>
					</cu-header>
				</template>
				<!-- 搜索 -->
				<template v-if="item.controller == 'search'">
					<cu-search :id="index"></cu-search>
				</template>
				<!-- 切换卡 -->
				<template v-if="item.controller == 'tabbar'">
					<cu-tabbar :datas="item.data" :id="index"></cu-tabbar>
				</template>
				<view>
					<!-- 标题栏 -->
					<template v-if="item.controller == 'title'">
						<cu-title :title="item.attribute.text" hint="Modal" modal="3" :id="index"></cu-title>
					</template>
					<!-- 条目 -->
					<template v-if="item.controller == 'cell'">
						<cu-cell :id="index"></cu-cell>
					</template>
					<template v-if="item.controller == 'badge'">
						<cu-badge ltext="喜欢" rtext="20" bgcolor="orange" :id="index"></cu-badge>
					</template>
					<!-- 胶囊 -->
					<template v-if="item.controller == 'capsule'">
						<cu-capsule :id="index"></cu-capsule>
					</template>
					<!-- 条幅 -->
					<template v-if="item.controller == 'banner'">
						<cu-banner :id="index"></cu-banner>
					</template>
					<!-- 轮播图 -->
					<template v-if="item.controller == 'swiper'">
						<cu-swiper :id="index"></cu-swiper>
					</template>
					<!-- 卡片 -->
					<template v-if="item.controller == 'card'">
						<cu-card :id="index"></cu-card>
					</template>
					<!-- 网格 -->
					<template v-if="item.controller == 'grid'">
						<cu-grid :datas="item.data" :id="index"></cu-grid>
					</template>
					<!-- 富媒体网格 -->
					<template v-if="item.controller == 'grid-media'">
						<cu-grid-media :datas="item.data" :id="index"></cu-grid-media>
					</template>
					<!-- 列表 -->
					<template v-if="item.controller == 'list'">
						<cu-list :datas="item.data" :id="index"></cu-list>
					</template>
					<!--条目列表 -->
					<template v-if="item.controller == 'list-cell'">
						<cu-list-cell :datas="item.data" :id="index"></cu-list-cell>
					</template>
					<!-- 富媒体列表 -->
					<template v-if="item.controller == 'list-media'">
						<cu-list-media :datas="item.data" :id="index"></cu-list-media>
					</template>
					<!-- 步骤条 -->
					<template v-if="item.controller == 'steps'">
						<cu-steps :datas="item.data" :id="index"></cu-steps>
					</template>
					<!-- 时间线 -->
					<template v-if="item.controller == 'timeline'">
						<cu-timeline :datas="item.data" :id="index"></cu-timeline>
					</template>
					<!-- 输入框 -->
					<template v-if="item.controller == 'input'">
						<cu-input :id="index"></cu-input>
					</template>
					<!-- 数字输入框 -->
					<template v-if="item.controller == 'input-number'">
						<cu-input-number :id="index"></cu-input-number>
					</template>
					<!-- 单选 -->
					<template v-if="item.controller == 'radio'">
						<cu-radio :datas="item.data" :id="index"></cu-radio>
					</template>
					<!-- 多选框 -->
					<template v-if="item.controller == 'checkbox'">
						<cu-checkbox :datas="item.data" :id="index"></cu-checkbox>
					</template>
					<!-- 切换开关 -->
					<template v-if="item.controller == 'switch'">
						<cu-switch :id="index"></cu-switch>
					</template>
					<!-- 多行输入 -->
					<template v-if="item.controller == 'textarea'">
						<cu-textarea :id="index"></cu-textarea>
					</template>
				</view>

				<!-- 异常页 -->
				<template v-if="item.controller == 'nosearch'">
					<cu-nosearch :id="index"></cu-nosearch>
				</template>
				<!-- 普通导航 -->
				<template v-if="item.controller == 'navbar'">
					<cu-navbar :id="index"></cu-navbar>
				</template>
				<!-- 按钮导航 -->
				<template v-if="item.controller == 'navbar-btns'">
					<cu-navbar-btns :id="index"></cu-navbar-btns>
				</template>
				<!-- 多元导航 -->
				<template v-if="item.controller == 'navbar-multi'">
					<cu-navbar-multi :id="index"></cu-navbar-multi>
				</template>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		onHome
	} from '@/utils/api.js';
	//header
	import cuHeader from '@/components/diy/header/cu-header.vue';
	import cuSearch from '@/components/diy/header/cu-search.vue';
	import cuTabbar from '@/components/diy/header/cu-tabbar.vue';

	//content
	import cuTitle from '@/components/diy/content/cu-title.vue';
	import cuCell from '@/components/diy/content/cu-cell.vue';
	import cuBadge from '@/components/diy/content/cu-badge.vue';
	import cuCapsule from '@/components/diy/content/cu-capsule.vue';
	import cuBanner from '@/components/diy/content/cu-banner.vue';
	import cuCard from '@/components/diy/content/cu-card.vue';
	import cuSwiper from '@/components/diy/content/cu-swiper.vue';
	import cuNoSearch from '@/components/diy/content/cu-nosearch.vue';
	//list
	import cuGrid from '@/components/diy/list/cu-grid.vue';
	import cuGridMedia from '@/components/diy/list/cu-grid-media.vue';
	import cuList from '@/components/diy/list/cu-list.vue';
	import cuListCell from '@/components/diy/list/cu-list-cell.vue';
	import cuListMedia from '@/components/diy/list/cu-list-media.vue';
	import cuSteps from '@/components/diy/list/cu-steps.vue';
	import cuTimeline from '@/components/diy/list/cu-timeline.vue';
	//from
	import cuInput from '@/components/diy/from/cu-input.vue';
	import cuInputNumber from '@/components/diy/from/cu-input-number.vue';
	import cuRadio from '@/components/diy/from/cu-radio.vue';
	import cuCheckbox from '@/components/diy/from/cu-checkbox.vue';
	import cuSwitch from '@/components/diy/from/cu-switch.vue';
	import cuTextarea from '@/components/diy/from/cu-textarea.vue';
	//footer
	import cuNavbar from '@/components/diy/footer/cu-navbar.vue';
	import cuNavbarBtns from '@/components/diy/footer/cu-navbar-btns.vue';
	import cuNavbarMulti from '@/components/diy/footer/cu-navbar-multi.vue';
	export default {
		computed: {
			...mapState({
				pageValue: state => state.diy.pageValue
			})
		},
		components: {
			cuHeader,
			cuSearch,
			cuTabbar,
			cuNavbar,
			cuNavbarBtns,
			cuNavbarMulti,
			cuTitle,
			cuCell,
			cuBadge,
			cuCapsule,
			cuBanner,
			cuSwiper,
			cuCard,
			cuNoSearch,
			cuGrid,
			cuGridMedia,
			cuList,
			cuListCell,
			cuListMedia,
			cuSteps,
			cuTimeline,
			cuInput,
			cuInputNumber,
			cuRadio,
			cuCheckbox,
			cuSwitch,
			cuTextarea
		},
		data() {
			return {
				shareinfo: {
					title: 'ColorUI-Plus',
					desc: '',
					path: 'https://www.homeeyes.cn/app/livedemo/downloadapk.html',
					logo: 'https://www.homeeyes.cn/app/images/icon_logo.png'
				},
				pageGroup: {
					name: '自定义页面',
					auther: '张三',
					create_time: '2021-03-11',
					lists: []
				}
			};
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return this.shareinfo;
		},
		onLoad() {

			this.setModule(1);
		},
		onReady() {

		},
		onHide() {
			this.setModule(0);
		},
		onUnload() {
			this.setModule(0);
		},
		onShow() {
			this.onInitDataPage();
		},
		methods: {
			...mapMutations(['setModule', 'setPageValue', 'addPageElement']),
			onInitDataPage: function() {
				let that = this;
				this.setPageValue(this.pageGroup);
				this.addPageElement({
					controller: 'Header',
					attribute: {
						text: '测试标题',
						bgcolor: 'bg-gradual-blue',
						back: false
					},
					data: []
				});
				this.addPageElement({
					controller: 'Bar',
					attribute: {
						text: '测试标题',
						bgcolor: 'bg-gradual-blue',
						back: false
					},
					data: []
				});
				this.addPageElement({
					controller: 'Bar',
					attribute: {
						text: '测试标题',
						bgcolor: 'bg-gradual-blue',
						back: false
					},
					data: []
				});
				this.addPageElement({
					controller: 'Grid',
					attribute: {

					},
					data: [{
							title: '操作条',
							name: 'bar',
							color: 'cyan',
							cuIcon: 'newsfill'
						},
						{
							title: '卡片',
							name: 'card',
							color: 'blue',
							cuIcon: 'card'
						},
						{
							title: '按钮',
							name: 'button',
							color: 'red',
							cuIcon: 'btn'
						},
						{
							title: '气泡',
							name: 'chat',
							color: 'purple',
							cuIcon: 'font'
						},
						{
							title: '表单 ',
							name: 'from',
							color: 'mauve',
							cuIcon: 'cuIcon'
						}
					]
				});
			},
			onSelectElement: function(e) {
				console.log("测试");
				//console.log(e.currentTarget.dataset.index);

			},
			onCommit: function(e) {
				onHome().then((res) => {
					console.log(res);
				}).error((err) => {
					console.log(err);
				})
			}
		}
	}
</script>

<style scoped>

</style>
